﻿<script type="text/template" id="basicuser-template">
    <el-container class="page-container p20">
        <el-header height="auto">
            <div class="tools-box">
                <div class="tools-box-buttons">
                    @Exhort.Backstage.Components.WorkControls.PageButtons(this)
                </div>
                <el-input placeholder="请输入用户姓名或账号搜索" v-model="listQuery.search" v-on:keyup.enter.native="search" size="small" style="width: 250px;">
                    <el-button slot="append" icon="el-icon-search" v-on:click="search"></el-button>
                </el-input>
            </div>
        </el-header>
        <el-main class="table-box">
            <el-table height="100%" ref="table" :data="rows" row-key="ID" v-on:row-click="clickRow" border>
                <el-table-column label="选择" width="60" align="center">
                    <template slot-scope="scope">
                        <el-radio class="table-row-radio" v-model="currentRow" :label="scope.row"><i /></el-radio>
                    </template>
                </el-table-column>
                <el-table-column prop="Name" label="姓名" width="150" align="center">
                    <template slot-scope="scope">
                        <div class="user-info">
                            <el-avatar :size="33" :src="'/userfiles/head/'+scope.row.Head"></el-avatar>
                            <span class="name">{{scope.row.Name}}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="UserName" label="用户账号" width="150" align="center"></el-table-column>
                <el-table-column prop="Remark" label="描述"></el-table-column>
                <el-table-column prop="IsEnabled" label="启用" width="80" align="center">
                    <template slot-scope="scope">
                        <i v-if="scope.row.IsEnabled" class="el-icon-circle-check color-success"></i>
                        <i v-else class="el-icon-remove-outline color-danger"></i>
                    </template>
                </el-table-column>
                <el-table-column prop="InsertTime" label="创建时间" width="180" align="center"></el-table-column>
            </el-table>
        </el-main>
        <el-footer class="pagination-box" height="auto">
            <el-pagination :current-page.sync="currentPage" :page-size.sync="pageSize" :total="total" v-on:size-change="loadList" v-on:current-change="loadList" background></el-pagination>
        </el-footer>
        <el-dialog ref="dialog" :title="model.ID?'修改':'新增'" :visible.sync="dialogVisible" :close-on-click-modal="false" width="500px">
            <el-form ref="form" :rules="rules" :model="model" label-width="80px">
                <el-form-item prop="UserName" label="用户账号">
                    <el-input :disabled="model.ID!=''" v-model="model.UserName"></el-input>
                </el-form-item>
                <el-form-item v-if="!model.ID" prop="PassWord" label="登录密码">
                    <el-input v-model="model.PassWord" type="password" show-password></el-input>
                </el-form-item>
                <el-form-item prop="Name" label="用户姓名">
                    <el-input v-model="model.Name"></el-input>
                </el-form-item>
                <el-form-item prop="Head" label="上传头像">
                    <el-upload class="avatar-uploader"
                               action="/other/common/cut"
                               accept="image/png,image/jpeg"
                               :data="{dir:'head',width:88,height:88}"
                               :show-file-list="false"
                               :on-success="handleAvatarSuccess"
                               :on-before="beforeAvatarUpload">
                        <img v-if="model.Head!='null.png'" :src="'/userfiles/head/'+model.Head" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item prop="Mail" label="电子邮箱">
                    <el-input v-model="model.Mail"></el-input>
                </el-form-item>
                <el-form-item prop="IsEnabled" label="是否启用">
                    <el-switch v-model="model.IsEnabled"></el-switch>
                </el-form-item>
                <el-form-item prop="Remark" label="用户描述">
                    <el-input v-model="model.Remark" :rows="3" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-on:click="dialogVisible=false">关闭</el-button>
                <el-button type="primary" v-on:click="submitForm">确定</el-button>
            </div>
        </el-dialog>
        <el-dialog ref="transfer" title="权限" :visible.sync="transferVisible" :close-on-click-modal="false" width="622px">
            <el-transfer v-model="transferValue" :data="transferData" :titles="['备选角色', '已选角色']"
                         :props="{key:'ID',label:'Title'}" target-order="push"></el-transfer>
            <div slot="footer" class="dialog-footer">
                <el-button v-on:click="transferVisible=false">关闭</el-button>
                <el-button type="primary" v-on:click="setPower">确定</el-button>
            </div>
        </el-dialog>
    </el-container>
</script>
<script type="text/javascript">
    var basicuser = {
        template: "#basicuser-template",
        data: function () {
            return {
                listQuery: { page: 1, rows: 20, search: "" },
                rows: [],
                total: 0,
                currentRow: null,
                model: {
                    ID: "",
                    UserName: "",
                    PassWord: "",
                    Name: "",
                    Head: "null.png",
                    Mail: "",
                    IsSuper: false,
                    IsEnabled: true,
                    Remark: ""
                },
                transferData: [],
                transferValue: [],
                transferVisible: false,
                rules: {
                    UserName: [
                        { required: true, message: "请填写用户账号", trigger: "blur" },
                        { min: 5, max: 15, message: "账号长度再 5 到 15 个字符之间", trigger: "blur" }
                    ],
                    PassWord: [
                        { required: true, message: "请填写登录密码", trigger: "blur" },
                        { min: 6, max: 16, message: "密码长度再 6 到 16 个字符之间", trigger: "blur" }
                    ],
                    Name: [{ required: true, message: "请填写用户姓名", trigger: "blur" }]
                },
                dialogVisible: false
            }
        },
        computed: {
            currentPage: {
                get() { return this.listQuery.page; },
                set(val) { this.listQuery.page = val; }
            },
            pageSize: {
                get() { return this.listQuery.rows; },
                set(val) { this.listQuery.rows = val; }
            }
        },
        methods: {
            loadList: function () {
                var that = this;
                workVue.ajax({
                    url: "/basic/user/grid",
                    data: that.listQuery,
                    target: that.$el,
                    success: function (result) {
                        that.rows = result.data.rows;
                        that.total = result.data.total;
                    }
                });
                that.currentRow = null;
            },
            search: function () {
                var that = this;
                that.listQuery.page = 1;
                that.loadList();
            },
            clickRow: function (row) {
                this.currentRow = row;
            },
            resetModel: function () {
                this.model = {
                    ID: "",
                    UserName: "",
                    PassWord: "",
                    Name: "",
                    Head: "null.png",
                    Mail: "",
                    IsSuper: false,
                    IsEnabled: true,
                    Remark: ""
                };
            },
            insert: function () {
                var that = this;
                that.resetModel();
                that.$nextTick(function () {
                    that.$refs.form.clearValidate();
                });
                that.dialogVisible = true;
            },
            update: function () {
                var that = this;
                if (that.currentRow) {
                    that.insert();
                    workVue.ajax({
                        url: "/basic/user/get",
                        data: { id: that.currentRow.ID },
                        target: that.$refs.dialog.$el,
                        success: function (result) {
                            that.model = result.data;
                        }
                    });
                }
                else { that.$message.warning("请选择操作行"); }
            },
            beforeAvatarUpload: function (file) {
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isLt2M;
            },
            handleAvatarSuccess: function (res, file) {
                var that = this;
                if (res.success) {
                    that.model.Head = res.data.file;
                }
                else { that.$message.error(res.message); }
            },
            submitForm: function () {
                var that = this;
                that.$refs.form.validate((valid) => {
                    if (valid) {
                        workVue.ajax({
                            url: "/basic/user/save",
                            type: "post",
                            data: { model: that.model },
                            target: that.$refs.dialog.$el,
                            success: function (result) {
                                that.loadList();
                                that.dialogVisible = false;
                                that.$message.success(result.message);
                            }
                        });
                    }
                });
            },
            remove: function () {
                var that = this;
                if (that.currentRow) {
                    that.$confirm("删除数据后将不可恢复，是否继续？", "提示", {
                        type: "warning"
                    }).then(() => {
                        workVue.ajax({
                            url: "/basic/user/remove",
                            type: "post",
                            data: { id: that.currentRow.ID },
                            target: that.$el,
                            success: function (result) {
                                that.loadList();
                                that.$message.success(result.message);
                            }
                        });
                    }).catch(() => { });
                }
                else { that.$message.warning("请选择操作行"); }
            },
            reload: function () {
                this.loadList();
            },
            enable: function (bit) {
                var that = this;
                if (that.currentRow) {
                    workVue.ajax({
                        url: "/basic/user/enable",
                        type: "post",
                        data: { id: that.currentRow.ID, bit: bit, },
                        target: that.$el,
                        success: function (result) {
                            that.loadList();
                            that.$message.success(result.message);
                        }
                    });
                }
                else { that.$message.warning("请选择操作行"); }
            },
            reset: function () {
                var that = this;
                if (that.currentRow) {
                    that.$prompt('请输入新密码', '提示', {
                        inputPattern: /^.{6,16}$/,
                        inputErrorMessage: '密码长度再 6 到 16 个字符之间'
                    }).then(({ value }) => {
                        workVue.ajax({
                            url: "/basic/user/resetpwd",
                            type: "post",
                            data: {
                                id: that.currentRow.ID,
                                pwd: value
                            },
                            target: that.$el,
                            success: function (result) {
                                that.$message.success(result.message);
                            }
                        });
                    }).catch(() => { });
                }
                else { that.$message.warning("请选择操作行"); }
            },
            powerInit: function () {
                var that = this;
                workVue.ajax({
                    url: "/basic/role/gridall",
                    success: function (result) {
                        that.transferData = result.data;
                    }
                });
            },
            power: function () {
                var that = this;
                if (that.currentRow) {
                    that.transferValue = [];
                    that.transferVisible = true;
                    workVue.ajax({
                        url: "/basic/user/getpower",
                        data: { id: that.currentRow.ID },
                        target: that.$refs.transfer.$el,
                        success: function (result) {
                            that.transferValue = result.data;
                        }
                    });
                }
                else { that.$message.warning("请选择操作行"); }
            },
            setPower: function () {
                var that = this;
                workVue.ajax({
                    url: "/basic/user/setpower",
                    type: "post",
                    data: {
                        id: that.currentRow.ID,
                        values: that.transferValue
                    },
                    target: that.$refs.transfer.$el,
                    success: function (result) {
                        that.transferVisible = false;
                        that.$message.success(result.message);
                    }
                });
            },
        },
        mounted: function () {
            this.loadList();
            this.powerInit();
        }
    }
</script>